<template>
	<view>
		<view class="content_box box-shadow">
			<view class="name_box" v-if="title == '修改昵称'"><input type="text" value="" placeholder="请输入新昵称" /></view>
			<view class="phone_box" v-else-if="title == '修改手机号码'">
				<view class="item_box">
					<input type="number" value="" placeholder="请输入手机号码" />
					<view class="wrap">
						<u-toast ref="uToast"></u-toast>
						<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
						<u-button size="mini" @tap="getCode" hover-class="none">{{ tips }}</u-button>
					</view>
				</view>
				<input type="text" value="" placeholder="请输入验证码" />
			</view>
			<view class="name_box" v-else-if="title == '实名认证'">
				<view class="item_box"><input type="text" value="" placeholder="请输入真实姓名" /></view>
				<view class="item_box u-m-t-30"><input type="number" value="" placeholder="请输入手机号码" /></view>
				<view class="item_box u-m-t-30"><input type="text" value="" placeholder="请输入身份证号码"  /></view>
				<view class="item_box u-m-t-30 border_none"><input type="number" value="" placeholder="请输入银行卡号" /></view>
			</view>
			<view class="name_box" v-else-if="title == '修改密码'">
				<view class="item_box">
					<input type="text" value="" placeholder="请输入新密码"/> 
				</view>
				<view class="item_box u-m-t-30 border_none">
					<input type="text" value="" placeholder="请输入确认密码"/>
				</view>
			</view>
		</view>
		<button type="default" class="btn" @click="confirm">确定</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '',
			tips: '',
			seconds: 10
		};
	},
	methods: {
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				});
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					this.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		end() {
			// this.$u.toast('倒计时结束');
		},
		start() {
			// this.$u.toast('倒计时开始');
		},
		confirm() {
			uni.navigateBack({
				delta: 1
			});
		}
	},
	onLoad(options) {
		this.title = options.title;
		uni.setNavigationBarTitle({
			title: options.title
		});
	}
};
</script>

<style lang="scss" scoped>
.content_box {
	margin-bottom: 135upx;
	padding: 30upx;
}

.btn {
	height: 60upx;
	border-radius: 8upx;
	font-size: 32upx;
	line-height: 60upx;
	color: #ffffff;
	background: #373846;
	border: none;
	&::after {
		border: none;
	}
}

.item_box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 27upx;
	border-bottom: 2upx solid #eeeeee;
	input {
		width: 100%;
	}
}
.phone_box {
	input {
		&:last-child {
			margin-top: 27upx;
		}
	}
}

.border_none {
	border: none;
	padding-bottom: 0;
}
</style>

<style>
page {
	padding: 30upx;
}
</style>
